<template>
    <div class="students-container">
        <el-card class="content-card">
            <div class="toolbar">
                <el-button type="primary" @click="dialogVisible = true">添加学生</el-button>
            </div>

            <el-table :data="students" height="calc(100vh - 200px)">
                <el-table-column prop="id" label="学号" width="120" />
                <el-table-column prop="name" label="姓名" width="120" />
                <el-table-column prop="class" label="班级" width="120" />
                <el-table-column prop="age" label="年龄" width="80" />
                <el-table-column prop="gender" label="性别" width="80" />
                <el-table-column prop="phone" label="联系电话" width="150" />
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button type="primary" size="small" @click="handleEdit(scope.row)">编辑</el-button>
                        <el-button type="danger" size="small" @click="handleDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>

        <el-dialog v-model="dialogVisible" :title="isEdit ? '编辑学生' : '添加学生'">
            <el-form :model="studentForm" :rules="rules" ref="formRef">
                <el-form-item label="姓名" prop="name">
                    <el-input v-model="studentForm.name" />
                </el-form-item>
                <el-form-item label="班级" prop="class">
                    <el-input v-model="studentForm.class" />
                </el-form-item>
                <el-form-item label="年龄" prop="age">
                    <el-input-number v-model="studentForm.age" :min="1" :max="100" />
                </el-form-item>
                <el-form-item label="性别" prop="gender">
                    <el-select v-model="studentForm.gender" placeholder="请选择性别">
                        <el-option label="男" value="男" />
                        <el-option label="女" value="女" />
                    </el-select>
                </el-form-item>
                <el-form-item label="联系电话" prop="phone">
                    <el-input v-model="studentForm.phone" />
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="handleSubmit">确定</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { studentApi } from '@/api'

// // 模拟学生数据
const students = ref([])

const dialogVisible = ref(false)
const isEdit = ref(false)
const currentId = ref(null)

const studentForm = reactive({
    name: '',
    class: '',
    age: 18,
    gender: '男',
    phone: ''
})

const rules = {
    name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
    class: [{ required: true, message: '请输入班级', trigger: 'blur' }],
    age: [{ required: true, message: '请输入年龄', trigger: 'blur' }],
    gender: [{ required: true, message: '请选择性别', trigger: 'change' }],
    phone: [
        { required: true, message: '请输入联系电话', trigger: 'blur' },
        { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
    ]
}

const handleEdit = (row) => {
    isEdit.value = true
    currentId.value = row.id
    Object.assign(studentForm, row)
    dialogVisible.value = true
}

const handleDelete = (row) => {
    ElMessageBox.confirm('确定要删除该学生吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(async () => {
        try {
            await studentApi.deleteStudent(row.id)
            ElMessage.success('删除成功')
            fetchStudents() // 重新获取列表
        } catch (error) {
            console.error('删除失败:', error)
        }
    }).catch(() => { })
}

const resetForm = () => {
    studentForm.name = ''
    studentForm.class = ''
    studentForm.age = 18
    studentForm.gender = '男'
    studentForm.phone = ''
    isEdit.value = false
    currentId.value = null
}

const handleSubmit = async () => {
    try {
        if (isEdit.value) {
            await studentApi.updateStudent(currentId.value, studentForm)
            ElMessage.success('编辑成功')
        } else {
            await studentApi.createStudent(studentForm)
            ElMessage.success('添加成功')
        }
        dialogVisible.value = false
        resetForm()
        fetchStudents() // 重新获取列表
    } catch (error) {
        console.error('操作失败:', error)
    }
}

// 获取学生列表
const fetchStudents = async () => {
    try {
        const data = await studentApi.getStudents()
        console.log(data);
        students.value = data
    } catch (error) {
        console.error('获取学生列表失败:', error)
    }
}

// 页面加载时获取数据
fetchStudents()
</script>

<style scoped>
.students-container {
    height: 100%;
    width: 100%;
}

.content-card {
    height: 100%;
}

.toolbar {
    margin-bottom: 20px;
}

:deep(.el-card__body) {
    height: 100%;
    padding: 20px;
}

:deep(.el-dialog__body) {
    padding-top: 10px;
}
</style>